<template>
  <!--  cbs担保台账  -->
    <div class="internalTransactionRecordsPage">
        <div class="search-wrap d-flex a-center flex-wrap">
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>担保起始日</label>
                <el-date-picker
                        class="m-l10"
                        v-model="form.dateTime"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        size="large"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="datePickerChange"
                />
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>担保结束日</label>
                <el-date-picker
                        class="m-l10"
                        v-model="form.valueTime"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        size="large"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="valueTimePickerChange"
                />
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>借款合同号</label>
                <el-input class="m-l10" v-model="form.loanContractNo" placeholder="请输入借款合同号"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>金融机构</label>
                <el-input class="m-l10" v-model="form.institutionName" placeholder="请输入金融机构"></el-input>
            </div>
            <div class="search-buttons m-l50 d-flex a-center m-b10">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                        class="button_edit m-r10"
                        @click="onExport()"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
                <el-button
                        class="button_edit"
                        @click="onImport()"
                >
                    <svg-icon icon-class="project-detail-icon-l-xiazai" class="icon-export m-r5"></svg-icon>
                    导入
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                radio
                :height="550"
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #update="scope">
                <el-button
                    size="small"
                    class="button_edit"
                    @click="onEdit(scope.row)"
                >
                    编辑
                </el-button>
            </template>
        </public-table>
    </div>

    <import-file-popup
            :title="title"
            :is-tip="true"
            ref="importFilePopupRef"
            :interface-config="importFileInterfaceConfig"
            :template-config="templateConfig"
            @on-success="onQuery"
    />

    <guarantee-ledger-popup
        ref="guaranteeLedgerPopupRef"
        @on-success="onQuery"
    />
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElDivider,
    ElMessage,
    ElDatePicker,
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi} from "@/api/businessFinance";
import {useRouter} from "vue-router";
import ImportFilePopup from "@/components/importFilePopup.vue";
import GuaranteeLedgerPopup from "./components/guaranteeLedgerPopup.vue";

const router = useRouter();
const title = ref('导入CBS担保台账');
const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.getBankGuaranteeList',
});
const importFileInterfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.importGuarantee',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.leadingOut',
    tableName:'CBS担保台账导出'
});
const templateConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.downloadMB',
    param:{type:13},
    templateName:'CBS担保台账模版'
});

const {
    form,
    page,
    tableOption,
    tableData,
    selectedArr,
    onQuery,
    onReset,
    onPageChange,
    getData,
    handleSelectionChange,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    loanContractNo:'',
    institutionName:'',
    dateTime:'',
    startTime:'',
    endTime:'',
    startDate:'',
    endDate:'',
    valueTime:''
}

tableOption.value = [
    { label: "担保人", prop: "guaranteePerson", minWidth: 100 },
    { label: "被担保人", prop: "wasGuaranteePerson", minWidth: 100 },
    { label: "担保合同号", prop: "guaranteeContractNo", minWidth: 100 },
    { label: "担保金额", prop: "guaranteeAmount", minWidth: 100 },
    { label: "借款合同号", prop: "loanContractNo", minWidth: 100 },
    { label: "借款金额", prop: "loanAmount", minWidth: 100 },
    { label: "金融机构", prop: "institutionName", minWidth: 100 },
    { label: "担保起始日", prop: "guaranteeStartTime", minWidth: 100 },
    { label: "担保结束日", prop: "guaranteeEndTime", minWidth: 100 },
    { label: "借款起始日", prop: "loanStartTime", minWidth: 100 },
    { label: "借款结束日", prop: "loanEndTime", minWidth: 100 },
    { label: "备注", prop: "remark", minWidth: 100 },
    { label: "操作", prop: "update", minWidth: 100,slot:true },
];

const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

const visible = ref(false);

/**
 * 新增计息计算
 *
 */
const addHandle = () => {
    if(selectedArr.value.length===0){
        ElMessage.warning('请选择一条要操作的数据!');
        return;
    }
    visible.value = true;
}

/**
 * 起始日期
 */
const datePickerChange = (e) => {
    if(e===null || (e instanceof Array && e.length===0)){
        form.value.startTime = '';
        form.value.endTime = '';
        return;
    }
    form.value.startTime = e[0];
    form.value.endTime = e[1];
}

/**
 * 到期日期
 * @param e
 */
const valueTimePickerChange = (e) => {
    if(e===null || (e instanceof Array && e.length===0)){
        form.value.startDate = '';
        form.value.endDate = '';
        return;
    }
    form.value.startDate = e[0];
    form.value.endDate = e[1];
}

const importFilePopupRef = ref(null);

/**
 * 导入
 */
const onImport = () => {
    importFilePopupRef.value.openPopup();
}

/**
 *
 * @param type
 */
const toPath = (type) => {
    if(type==='hk'){
        router.push({path:`/businessFinance/bankManagement/bankInformation/paymentHistory`})
    }
    if(type==='fk'){
        router.push({path:`/businessFinance/bankManagement/bankInformation/loanRecords`})
    }
}

const guaranteeLedgerPopupRef = ref(null);

/**
 * 编辑
 */
const onEdit = (row) => {
    guaranteeLedgerPopupRef.value.openPopup(row.guaranteeId);
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:50
    });
});
</script>

<style lang="scss" scoped>
.internalTransactionRecordsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}

.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
